<template>
  <div>
    <!-- 欢迎文字 -->
    <div :style="xs || sm ? {'display': 'none'} : {'font-size': '4rem'}" class="leleo-left-welcome">
      {{ configdata.welcometitle }}
    </div>

    <!-- 搜索区 + 时间卡片 -->
    <v-row align="center">
      <!-- 左侧：搜索 + 打字机 -->
      <v-col cols="12" md="8">
        <v-text-field
          class="v-card"
          :style="xs || sm ? {'display': 'none'} : {}"
          v-model="searchQuery"
          placeholder="搜索..."
          variant="outlined"
          rounded
          hide-details
          @keyup.enter="performSearch"
        >
          <template v-slot:prepend-inner>
            <v-menu>
              <template v-slot:activator="{ props }">
                <v-btn variant="text" v-bind="props" class="engine-btn">
                  {{ selectedEngine.title }}
                  <v-icon icon="mdi-chevron-down"></v-icon>
                </v-btn>
              </template>
              <v-list class="glass-list">
                <v-list-item
                  v-for="engine in searchEngines"
                  :key="engine.value"
                  @click="selectedEngine = engine"
                  density="compact"
                >
                  {{ engine.title }}
                </v-list-item>
              </v-list>
            </v-menu>
          </template>

          <template v-slot:append-inner>
            <v-btn
              :icon="isUrl ? 'mdi-earth' : 'mdi-magnify'"
              variant="text"
              @click="performSearch"
            ></v-btn>
          </template>
        </v-text-field>

        <typewriter class="ma-3 d-flex align-center justify-center" style="min-height: 200px" />
      </v-col>

      <!-- 右侧：时间卡片 -->
      <v-col cols="12" md="4" align="center">
        <v-card class="ma-3" hover>
          <template v-slot:title>
            <span class="leleo-card-title clock-font">{{ formattedTime }}</span>
          </template>
          <template v-slot:subtitle>
            <span style="font-weight: bold">{{ formattedDate }}</span>
          </template>
          <turntable :color1="configdata.color.turntablecolor1" :color2="configdata.color.turntablecolor2" />
        </v-card>
      </v-col>
    </v-row>

    <!-- 项目卡片 -->
    <v-chip class="mt-3 ml-3 mb-9" prepend-icon="mdi-webhook" size="large" style="color: var(--leleo-vcard-color)">
      功能入口
    </v-chip>
    <v-container>
      <v-row>
        <v-col
          v-for="(item, key) in projectcards"
          :key="key"
          cols="6"
          md="4"
          lg="3"
          :style="xs ? {'padding': '6px 6px 30px 6px'} : {'padding': '12px 12px 36px 12px'}"
          style="position: relative;"
          class="loop-list preserve-3d"
        >
         <img
            v-if="!xs && !sm"
            :src="item.threeUrl"
            :class="[
              'card-img',
              xs && 'card-img-xs',
              sm && 'card-img-sm',
              md && 'card-img-md',
              lg && 'card-img-lg',
              xl && 'card-img-xl'
            ]"
          />
          <v-card class="preserve-3d">
            <v-img
              aspect-ratio="1.7778"
              :src="item.img"
              cover
              :style="{ opacity: (!xs && !sm) ? 0.3 : 0.9 }"
            ></v-img>
            
            <div class="card-title" :style="xs ? {'font-size': '0.9rem', 'padding': '0.15rem 0.5rem'} : {'font-size': '1.1rem', 'padding': '0.2rem 0.8rem'}">
              {{ item.title }}
            </div>
            <v-card-subtitle class="card-subtitle" :style="xs ? {'font-size': '0.6rem', 'padding': '0.1rem 0.5rem'} : {'font-size': '0.8rem', 'padding': '0.15rem 0.6rem'}">
              {{ item.subtitle }}
            </v-card-subtitle>

            <v-card-actions :style="xs || sm || md ? {'padding': '0', 'min-height': '0', 'height': '2.5rem'} : {'min-height': '0', 'height': '2.8rem'}">
              <v-btn :href="item.url" target="_blank" :text="item.go"></v-btn>
              <v-spacer></v-spacer>
              <v-btn
                :icon="item.show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                @click="toggleProject(item, key)"
              ></v-btn>
            </v-card-actions>

            <v-expand-transition>
              <div v-show="item.show" class="preserve-3d">
                <v-divider></v-divider>
                <v-card-text class="card-text" :style="xs ? {'font-size': '0.7rem'} : {'overflow-wrap': 'break-word', 'word-break': 'break-all', 'white-space': 'normal'}">
                  {{ item.text }}
                </v-card-text>
              </div>
            </v-expand-transition>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick  } from 'vue'
import { useDisplay } from 'vuetify'
import typewriter from '../components/typewriter.vue'
import turntable from '../components/turntable.vue'


// --- 响应式屏幕判断 ---
const { xs, sm, md,lg,xl  } = useDisplay()

// --- 接收 props ---
const props = defineProps({
  configdata: Object,
  formattedTime: String,
  formattedDate: String,
  projectcards: Array
})

// --- 数据定义 ---
const searchQuery = ref('')
const selectedEngine = ref({ title: 'Bing', value: 'bing' })
const searchEngines = [
  { title: 'Bing', value: 'bing' },
  { title: 'Google', value: 'google' },
  { title: '百度', value: 'baidu' },
  { title: 'Yandex', value: 'yandex' },
  { title: 'DuckDuckGo', value: 'duckduckgo' }
]
const tiltCard = ref('')

// --- 计算属性 ---
const isUrl = computed(() => {
  const str = searchQuery.value.trim()
  return isLikelyUrl(str)
})

// --- 方法 ---
const toggleProject = (item, key) => {
  item.show = !item.show
  projectcards.value.forEach((_, i) => {
    if (i !== key) _.show = false
  })
}

const performSearch = () => {
  const query = searchQuery.value.trim()
  if (!query) return

  if (isUrl.value) {
    let url = query
    if (!/^[a-z]+:\/\//i.test(url)) url = 'http://' + url
    window.open(url, '_blank')
  } else {
    const engineUrls = {
      google: `https://www.google.com/search?q=${encodeURIComponent(query)}`,
      bing: `https://www.bing.com/search?q=${encodeURIComponent(query)}`,
      baidu: `https://www.baidu.com/s?wd=${encodeURIComponent(query)}`,
      yandex: `https://yandex.com/search/?text=${encodeURIComponent(query)}`,
      duckduckgo: `https://duckduckgo.com/?q=${encodeURIComponent(query)}`
    }
    window.open(engineUrls[selectedEngine.value.value], '_blank')
  }
}

const isLikelyUrl = (input) => {
  const str = input.trim()
  if (/^(https?|ftp):\/\//i.test(str)) return true
  const domainPattern = /^([a-z0-9-]+\.)+[a-z]{2,}(\/.*)?$/i
  const localPattern = /^(localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(:\d+)?(\/.*)?$/i
  return domainPattern.test(str) || localPattern.test(str)
}


// --- 生命周期 ---
onMounted(async () => {
  if (!xs.value && !sm.value) {
    setTimeout(() => {
      VanillaTilt.init(document.querySelectorAll(".loop-list"), {
        max: 30,        // 最大倾斜角度
        speed: 3000,    // 倾斜动画速度
      });
    }, 1000);
  }
})
</script>

<style scoped>
@import url(/css/app.less);
@import url(/css/mobile.less);

.glass-list {
  background: transparent !important;
  backdrop-filter: blur(var(--leleo-blur));
  border-radius: 5%;
  color: var(--leleo-vcard-color);
  overflow: hidden;
}
.preserve-3d{
  transform-style: preserve-3d;
  perspective: 800px;
}
.card-img{
  width: 100%;
  height: 200px;
  object-fit: scale-down;
  position:absolute;
  left: 0;
  top:-20%;
  z-index: 1;
  transform: translateZ(50px);
}
.card-text,.card-subtitle,.card-title{
  transform: translateZ(20px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.card-img-xs { height: 180px; top: -8%; transform: translateZ(30px); }
.card-img-sm { height: 250px; top: -6%; transform: translateZ(40px); }
.card-img-md { height: 180px; top: -20%; transform: translateZ(45px); }
.card-img-lg { height: 200px; top: -19%; transform: translateZ(50px); }
.card-img-xl { height: 240px; top: -14%; transform: translateZ(60px); }
</style>